<template>
  <div id="app" style="width: 80%; margin: 0 auto">
    <FullCalendar :key="key" ref="myCalendar" :options="calendarOptions" />
    <button @click="getview()">按钮</button>
  </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import moment from "moment";

export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      key: new Date().getTime(),
      calendarOptions: {
        // 引入的插件，比如 fullcalendar/daygrid fullcalendar/timegrid 引入后才可显示月，周，日
        plugins: [timeGridPlugin, interactionPlugin],
        initialView: "timeGridWeek", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
        locale: "zh-cn",
        eventBackgroundColor: "rgba(45, 140, 240, 0.149019607843137)",
        eventBorderColor: "rgba(45, 140, 240, 1)",
        eventTextColor: "#1C2C51",
        aspectRatio: 2.4, // 设置日历单元格宽度与高度的比例，可用于控制组件高度
        displayEventTime: false, // 事件中是否显示时间
        allDaySlot: false, // 周，日视图时，all-day 不显示
        slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
        buttonText: {
          week: "周",
          day: "日",
        },
        headerToolbar: {
          // 日历头部按钮位置
          left: "",
          center: "prev,title,next",
          right: "timeGridWeek,timeGridDay",
        },
        slotLabelFormat: {
          hour: "2-digit",
          minute: "2-digit",
          meridiem: false,
          hour12: false, // 设置时间为24小时
        },
        nowIndicator: true,
        dayHeaderClassNames: "dayHeaderClassName",
        selectable: true, // 是否可以选中日历格
        selectMirror: true,
        selectOverlap: false,
        editable: false, // 是否可以进行（拖动、缩放）修改
        eventStartEditable: false, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
        eventDurationEditable: false, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽

        // 以下为监听事件
        select: this.handleDateSelect, // 选中日历格事件

        events: [
          {
            title: "事件1",
            start: "2021-07-27 05:30",
            end: "2021-07-27 06:30",
          },
          {
            title: "事件2",
            start: "2021-07-28 10:00",
            end: "2021-07-28 13:00",
          },
        ],
      },
    };
  },
  mounted() {
    this.$refs.myCalendar.getApi().gotoDate("2020-08-08");
  },
  methods: {
    handleDateSelect(v) {
      let start = moment(v.start).format("YYYY-MM-DD HH:mm");
      let end = moment(v.end).format("YYYY-MM-DD HH:mm");
      let event = {
        title: start + "-" + end,
        start: start,
        end: end,
      };

      v.view.calendar.addEvent(event);
    },
    getview() {
      console.log(this.$refs.myCalendar.getApi().currentData.currentViewType);
    },
  },
};
</script>

<style>
.fc-toolbar-title {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 12px !important;
  color: #1c2c51 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

.fc-prev-button {
  color: #d6d6d6 !important;
  border: none !important;
  background: none !important;
}

.fc-prev-button:focus {
  box-shadow: none !important;
}

.fc-next-button {
  color: #d6d6d6 !important;
  border: none !important;
  background: none !important;
}

.fc-next-button:focus {
  box-shadow: none !important;
}

.dayHeaderClassName {
  background-color: #f5f7f9 !important;
  color: #1c2c51 !important;
  height: 50px !important;
  vertical-align: middle !important;
}
</style>
